<template>
    <div class="platform-tool-nav" v-if="!isEmpty(navigateData)">
        <el-card>
            <div class="main" v-for="(items,index) in navigateData.ptgjlist.nodes" :key="items.id">
                <div class="title">
                    <span v-if="index == 0"> <i class="iconfont" >&#xe622;</i>商机推送</span>
                    <span v-if="index == 1"> <i class="iconfont" >&#xe62d;</i>投标决策</span>
                    <span v-if="index == 2"> <i class="iconfont" >&#xe6fb;</i>投标工具</span>
                    <span v-if="index == 3"> <i class="iconfont" >&#xe71d;</i>拓展人脉</span>
                </div>
                <div class="items">
                    <div class="item" @click="point(item)" v-for="item in items.navis" :key="item.guid">
                        <el-link target="_blank" :href="item.url">{{item.name}}</el-link>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>

import { mapGetters } from 'vuex';


export default {
    head: {},
    mixins:[],
    components: {
       
    },
    data: () => ({
        
    }),
    computed: {
        ...mapGetters({
            navigateData: 'navigate/navigateData'
        }),
    },
    watch: {
        
    },
    methods: {
        isEmpty(val){
            return Object.keys(val).length === 0
        },
        /**
         * 埋点
         */
        point(item){
            this.$ajax({
                type: "post",
                url: `${this.$store.state.api.tbUrl}/home/navigateclick.json`,
                data: {
                    type:item.type,
                    id:item.guid,
                    name:item.name
                },
                callback: function (data, res) {},
                error: function () {},
            });
        },
        icon(ind){
            var switchArr = [
                {
                    name:'&#xe622;',
                    flip:false
                },
                {
                    name:'&#xe62d;',
                    flip:true
                },
                {
                    name:'&#xe6fb;',
                    flip:false
                },
                {
                    name:'&#xe71d;',
                    flip:false
                },
            ]
            
            return switchArr[ind];

        }
        
    },
    mounted() {
       
    },
    beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";

.platform-tool-nav {
    ::v-deep .el-card__body{
        padding-left: 10px;
        padding-right: 0;
    }
    .main {
        margin-top: 30px;

        &:first-child{
            margin-top: 0;
        }
    }
    .title {
        color: #343434;
        font-weight: 800;
        .iconfont {
            font-weight: normal;
        }
    }
    .items {
        display: flex;
        // justify-content: space-between;
        align-content:flex-start;
        flex-wrap: wrap;
        width: 100%;

        .item {
            box-sizing: border-box;
            padding-left: 10px;
            margin-top: 12px;
            width: 103px;
            position: relative;

            &::after{
            position: absolute;
            left: 0px;
            top: 10px;
            border: solid transparent;
            content: "";
            height: 5px;
            width: 5px;
            pointer-events: none;
            border-radius: 50%;
            background-color: #d8d8d8;
        }
        }
    }
}
</style>
 